<template>
    <div class="ctbsc-search">
        <div class="bgcc" style="height: 122px;">
            <div class="bread_box wp">
                <div class="bread">
                    <a href="/"><span class="myfont">&#xe651;</span>首页</a>
                    <router-link :to="'/list/38'"><span class="myfont rightico">&#xe68f;</span><span>全部公文</span>
                    </router-link>
                    <span class="myfont rightico">&#xe68f;</span><span>搜索结果</span>
                </div>
            </div>
            <div class="wp">
                <div class="listtitle">
                    <h2><span class="myfont">&#xe693;</span> 搜索： {{params.keyword}}</h2>
                    <span class="countnum">当前总共收录了 <span class="active">{{total}}</span> 份公文</span>
                </div>
            </div>
        </div>
        <div class="keke_list_box keke_doc_clearfix wp" v-loading="loading">
            <div class="bodybox keke_doc_clearfix">
                <div class="mod_list keke_doc_clearfix" id="container" style="min-height: 400px;">

                    <li v-for="(item,index) in records">
                        <i :style="'font-size:16px;width: 20px;height: 22px;color:'+$utils.getIconColor(item.type)"  :class="'far '+$utils.getIcon(item.type)"></i>
                        <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">{{item.title}}</router-link>
                        <span>{{item['human_time']}}</span>
                    </li>

                </div>
                <div style="margin-top:30px;margin-bottom:20px;text-align: center">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageParams.page"
                            :page-sizes="[30, 60, 90, 120]"
                            :page-size="pageParams.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

    export default {
        name: "SearchView",
        components: {

        },
        data() {
            return {
                records:[],
                loading:false,
                params:{
                    id:'',
                    sonid:'',
                    title:''
                },
                total:0,
                postParams:{
                    classifyId:'',
                    title:'',
                },
                pageParams:{
                    page:1,
                    pageSize:90
                }

            };
        },
        created() {

            this.$watch(
                () => this.$route.params,
                () => {
                    this.params=this.$route.params
                    this.pageParams.page=1;
                    if(this.params.keyword){
                        this.postParams.title=this.params.keyword;
                        this.$utils.setPageTitle(this.postParams.title)
                    }
                    this.getDataList()
                },
                // 组件创建完后获取数据，
                // 此时 data 已经被 observed 了
                { immediate: true }
            )


        },
        mounted:function(){
            this.$nextTick(()=>{

            });
        },
        methods:{
            handleSizeChange(val) {
                this.pageParams.page=1;
                this.pageParams.pageSize=val;
                this.getDataList();

            },
            handleCurrentChange(val) {
                this.pageParams.page=val;
                this.getDataList();

            },

            getDataList(){
                //请求列表数据
                let listParams={...this.postParams,...this.pageParams};
                this.loading=true;
                this.$apis.getDataList(listParams).then(lstres=>{
                    this.total=lstres.total;
                    this.records=lstres.records;
                    console.log(lstres)
                    this.loading=false;
                })
            }
        }
    };
</script>
<style>
    body {
        background: #f8f8f8 !important
    }

    .mod_list a:visited {
        color:  #3b8efa !important;
    }

    .mod_list li {
        line-height: 35px;
        float: left;
        width: 33.3%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mod_list li span {
        float: right;
        color: #999;
        margin: 0 20px
    }

    .mod_list li a {
        font-size: 14px;
        color: #000;
        white-space: nowrap;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .mod_list .myfont {
        font-size: 16px;
        margin-right: 5px
    }

    .bodybox {
        background-color: #fff;
        padding: 15px 20px;
    }

    .mod_list {
        margin-bottom: 15px;
    }

    .mod_list li {
        line-height: 20px;
        float: left;
        width: 33.3%;
        display: flex;
        padding: 6px 0;
        white-space: inherit;
    }

    .mod_list li a {
        width: 310px;
        height: 40px;
        font-size: 14px;
        color: #000;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: inherit;
    }

    .mod_list li span {
        float: right;
        color: #999;
        margin: 0 10px;
    }
</style>
